<script setup lang="ts">
// 字典管理
import { Delete, DocumentAdd, Edit, Operation, Plus, Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import instance from '@/utils/serve'
import AddChange from './components/addChange.vue'
import DicOptions from './components/dicoptions.vue'
import BulkImport from './components/bulkImport.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted } from 'vue'

const dicTotal = ref<any>(0)
const dicForm = ref<any>({
  search_text: '',
  page: 1,
  rows: 20
})

const listData = ref<any>([])

const getData = async (pageNo?: any) => {
  if (pageNo) dicForm.value.page = pageNo
  const params = {
    sqlId: 'dict.getDictList',
    pagination: true,
    page: dicForm.value.page,
    rows: dicForm.value.rows,
    dbName: 'report',
    sqlParam: JSON.stringify({ search_text: dicForm.value.search_text })
  }

  await instance
    .post('/common/getDataGrid', params)
    .then((res: any) => {
      // this.loading = false
      dicTotal.value = res.total
      listData.value = res.rows
      if (pageNo) ElMessage({ message: '查询成功', type: 'success' })
    })
    .catch((err: any) => {
      console.log(err)
    })
}

// 字典项配置
const isOption = ref(false)
const dicOptionsRef = ref<any>(null)
const dicOption = (info: any) => {
  // console.log('字典项配置', info)

  dicOptionsRef.value.show(info)
  isOption.value = true
  console.log(dicOptionsRef.value)
}
const delDict = (dict_id: string) => {
  console.log('删除字典', dict_id)
  ElMessageBox.confirm('你确定要删除本条字典？', '删除字典', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await instance
        .post('/dict/delDict', { dict_id: String(dict_id), dbName: 'report' })
        .then((res: any) => {
          if (res.code == 0) {
            ElMessage({ message: '删除成功', type: 'success' })
            getData()
          } else {
            ElMessage({ message: '删除失败', type: 'error' })
          }
        })
    })
    .catch(() => {
      ElMessage({ message: '已取消删除', type: 'info' })
    })
}
const indexMethod = (index: number) => {
  return index + 1
}

const handleSizeChange = (val: number) => {
  dicForm.value.page = 1
  dicForm.value.rows = val
  getData()
}

const handleCurrentChange = (val: number) => {
  dicForm.value.page = val
  getData()
}

// 新增字典
const isShow = ref(false)
const Title = ref<string>('新增字典')
const FromInfo = ref<any>({})
const addCgDic = () => {
  // console.log('新增字典')
  Title.value = '新增字典'
  isShow.value = true
}
// 修改公告
const changeBtn = (row: any) => {
  Title.value = '修改字典'
  FromInfo.value = row
  isShow.value = true
}

// 手动导入
const isBulkImport = ref(false)
const bulkImportBtn = (row: any) => {
  FromInfo.value = row
  isBulkImport.value = true
}
onMounted(() => {
  getData()
})
</script>
<template>
  <div class="dicBox">
    <el-form inline class="inline-form">
      <!-- 放一个隐藏input以免只有一个输入框的form回车后提交 -->
      <input style="display: none" />
      <el-form-item label="字典编码/名称：">
        <el-input v-model="dicForm.search_text" placeholder="字典编码/名称" />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" type="primary" @click="getData(1)">查询</el-button>
        <el-button :icon="Plus" type="success" @click="addCgDic" plain>新增</el-button>
      </el-form-item>
    </el-form>
    <el-table class="TableBox" :data="listData" stripe border>
      <el-table-column label="序号" type="index" width="60" align="center" :index="indexMethod" />
      <el-table-column label="字典编码" min-width="150" align="left" prop="dict_id" />
      <el-table-column label="字典名称" min-width="200" align="left" prop="dict_name" />
      <el-table-column label="维护时间" width="160" align="center" prop="operate_date" />
      <el-table-column label="操作" align="center" width="360">
        <template v-slot="{ row }">
          <el-button link type="primary" :icon="Edit" @click="changeBtn(row)">修改</el-button>
          <el-button link type="warning" :icon="Operation" @click="bulkImportBtn(row)">
            手动配置
          </el-button>
          <el-button link type="warning" :icon="DocumentAdd" @click="dicOption(row)">
            批量导入配置
          </el-button>
          <el-button link type="danger" :icon="Delete" @click="delDict(row.dict_id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="paginationBox"
      v-model:current-page="dicForm.page"
      v-model:page-size="dicForm.rows"
      :page-sizes="[10, 20, 30, 40]"
      size="default"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="dicTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <AddChange
    v-if="isShow"
    v-model:is-show="isShow"
    :title="Title"
    :fromInfo="FromInfo"
    @getDicData="getData"
  />
  <DicOptions v-model:is-show="isOption" ref="dicOptionsRef" />
  <BulkImport
    v-if="isBulkImport"
    v-model:is-show="isBulkImport"
    :fromInfo="FromInfo"
    @getDicData="getData"
  ></BulkImport>
</template>
<style scoped lang="less">
.dicBox {
  position: relative;
  padding: 8px;
  height: calc(100vh - 200px);
  :deep(.TableBox) {
    // width: 1200px !important;
    height: calc(100vh - 260px);
    .el-table--scrollable-x .el-table__body-wrapper {
      overflow: auto !important; // 横向滚动
    }
  }
  .paginationBox {
    position: fixed;
    bottom: 20px;
  }
}
</style>
